---
title: Guidelines
redirect_from:
  - /components/countryflag/
---

import ShortNonvisualSnippet from "snippets/short-nonvisual.mdx";

<ReactExample exampleId="CountryFlag-default" />

## When to use

- To add simple visual context so users can see the relevant country at a glance.
- With the country name so the context is [accessible to everyone](/foundation/accessibility/).

## When not to use

- For general visual context---use an [illustration](/components/visuals/illustration/).
- For users to select the right country---use a [select](/components/input/select) with country flags.

## Component status

<ComponentStatus component="CountryFlag" />

## Content structure

![Flag: works best accompanied by the country name.](fileId:4QJZqvBvRrLu6t9mwObCkA;nodeId:0%3A231)

## Content

<ShortNonvisualSnippet visual="flag" associated="country" />

<ReactExample exampleId="CountryFlag-accessibility" />
